<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.wraper{width: 960px;margin: 0 auto;}
			.header{height: 600px;background: #e01e24;}
			.f1,.f2,.f3,.f4,.f5,.header {font-size: 33px;color: #faffff;font-weight: bold;padding-top: 10px;padding-left: 10px;}
			.f1 {height: 320px;background: #b9db23;}
			.f2 {height: 410px;background: #1db1e1;}
			.f3 {height: 350px;background: #9f16e8;}
			.f4 {height: 530px;background: #cb33b3;}
			.f5 {height: 402px;background: #0de1f1;}
			.lift {width: 34px;background: #3c3c3c;position: fixed;top: 50%;right: 0;display: none;}
			.lift li {text-align: center;border-bottom: 1px solid #999999;padding: 10px 0;color: #fff;font-size: 12px;cursor: pointer;}
			.lift li.curr{background: #d2402c;}
			.lift li:hover {background: #d2402c;}
		</style>
	</head>
	<body>
		<div class="wraper">
			<div class="header">logo+nav+banner</div>
			<div class="f1">精品汇</div>
			<div class="f2">数码家电</div>
			<div class="f3">游戏汇</div>
			<div class="f4">美食汇</div>
			<div class="f5">&copy;版权所有，侵权必究</div>
		</div>
		<div class="lift">
			<ul>
				<li>精品汇</li>
				<li>数码家电</li>
				<li>游戏汇</li>
				<li>美食汇</li>
				<li>顶部</li>
			</ul>
		</div>
		<script src="jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var mt = -1 * $('.lift').height() / 2;
				$('.lift').css('margin-top',mt + 'px');
				
				var f1top = $('.f1').offset().top;
				var f2top = $('.f2').offset().top;
				var f3top = $('.f3').offset().top;
				var f4top = $('.f4').offset().top;
				
				function scrollLift (){
					var st = $(this).scrollTop() + $(this).height() / 2;
					if (st >= f4top) {
						$('.lift li').eq(3).addClass('curr').siblings().removeClass('curr');
					} else if(st >= f3top){
						$('.lift li').eq(2).addClass('curr').siblings().removeClass('curr');
					}else if(st >= f2top){
						$('.lift li').eq(1).addClass('curr').siblings().removeClass('curr');
					}else if(st >= f1top){
						$('.lift li').eq(0).addClass('curr').siblings().removeClass('curr');
						$('.lift').stop().fadeIn();
					}else{
						$('.lift').stop().fadeOut();
					}
				}
				
				$(window).scroll(scrollLift);
				
				$('.lift li').click(function(){
					$(window).off('scroll');
					if ($(this).index() === 0) {
						$(this).addClass('curr').siblings().removeClass('curr');
						$('html,body').stop().animate({
							scrollTop:f1top
						},function(){
							$(window).scroll(scrollLift);
						});
					}
					if ($(this).index() === 1) {
						$(this).addClass('curr').siblings().removeClass('curr');
						$('html,body').stop().animate({
							scrollTop:f2top
						},function(){
							$(window).scroll(scrollLift);
						});
					}
					if ($(this).index() === 2) {
						$(this).addClass('curr').siblings().removeClass('curr');
						$('html,body').stop().animate({
							scrollTop:f3top
						},function(){
							$(window).scroll(scrollLift);
						});
					}
					if ($(this).index() === 3) {
						$(this).addClass('curr').siblings().removeClass('curr');
						$('html,body').stop().animate({
							scrollTop:f4top
						},function(){
							$(window).scroll(scrollLift);
						});
					}
					if ($(this).index() === 4) {
						$('.lift').stop().fadeOut();
						$('html,body').stop().animate({
							scrollTop:0
						},function(){
							$(window).scroll(scrollLift);
						});
					}
				});
				
				
				//单击事件的代码简化
				
				/*$('.lift li').click(function(){
					$(window).off('scroll');
					$(this).addClass('curr').siblings().removeClass('curr');
					var currIndex =  '.f' + ($(this).index()+1);
					$('html,body').stop().animate({
						scrollTop: $(currIndex).offset().top
					},function(){
						$(window).scroll(scrollLift);
					});
				});*/
				
			});
		</script>
	</body>
</html>
